import Taro, { Component } from "@tarojs/taro";
import { View, Text, Swiper, SwiperItem, Image } from "@tarojs/components";
import "./index.scss";
import "../../assets/iconfont/iconfont.css";
import testImg from "../../assets/images/temp/banner1.jpg";
import testImg2 from "../../assets/images/temp/banner2.jpg";
import testImg3 from "../../assets/images/temp/banner3.jpg";
import testImg4 from "../../assets/images/temp/banner4.jpg";
export default class Appbanner extends Component {
  componentWillMount() {}

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  changebj() {
    // console.log("滚动了页面");
    this.props.swiperScroll();
  }

  render() {
    const { className } = this.props;
    return (
      <View className="onebj">
        <View className={className}>
          <View className="app-banner">
            <Swiper
              className="app-banner-swiper"
              indicatorColor="#ccc"
              indicatorActiveColor="#333"
              indicatorDots
              autoplay={true}
              circular={true}
              interval={500}
              onChange={() => this.changebj()}
            >
              <SwiperItem>
                <View className="banner-item">
                  <Image
                    className="banner-item-img"
                    style="width:100%; height:100%"
                    mode="widthFix"
                    src={testImg}
                  ></Image>
                </View>
              </SwiperItem>
              <SwiperItem>
                <View className="banner-item">
                  <Image
                    className="banner-item-img"
                    style="width:100%; height:100%"
                    mode="widthFix"
                    src={testImg2}
                  ></Image>
                </View>
              </SwiperItem>
              <SwiperItem>
                <View className="banner-item">
                  <Image
                    className="banner-item-img"
                    style="width:100%; height:100%"
                    mode="widthFix"
                    src={testImg3}
                  ></Image>
                </View>
              </SwiperItem>
              <SwiperItem>
                <View className="banner-item">
                  <Image
                    className="banner-item-img"
                    style="width:100%; height:100%"
                    mode="widthFix"
                    src={testImg4}
                  ></Image>
                </View>
              </SwiperItem>
            </Swiper>
          </View>
        </View>
      </View>
    );
  }
}
